<template>
  <div class="myChart" ref="myChart"></div>
</template>

<script>
import { getEchartData } from "@/api/index";
import * as echarts from "echarts";
import { FHQImage } from "common/imageBase.js";

export default {
  data() {
    return {
      myRef: "myChart",
      myChart: "",
      option: {
        backgroundColor: "rgb(2, 16, 51)",
        xAxis: {
          show: false,
          type: "value",
          max: 50,
          min: -51,
        },
        grid: {
          top: 100,
          bottom: 100,
          left: 130,
          right: 130,
        },
        yAxis: {
          show: false,
          type: "value",
          max: 50,
          min: -50,
        },
        series: [
          {
            type: "graph",
            coordinateSystem: "cartesian2d",
            z: 3,
            itemStyle: {
              normal: {
                shadowColor: "none",
              },
            },
            data: [],
          },
          {
            name: "",
            type: "lines",
            coordinateSystem: "cartesian2d",
            polyline: true,
            z: 1,
            lineStyle: {
              width: 2,
              color: "#fff",
              curveness: 0,
            },
            effect: {
              show: true,
              smooth: false,
              trailLength: 0, // 拖尾的长度
              symbol: "pin", // 动画的类型
            },
            data: [],
          },
        ],
        title: {
          left: "center",
          text: "监控节点实时状态",
          textStyle: { color: "#fff" },
        },
        legend: {
          data: [],
        },
      },
      dataArr: [],
      erArr: [],
      sanArr: [],
      allArr: [],
      ChartItem: [],
    };
  },
  computed: {},
  created() {
    this.getInfo();
  },
  mounted() {
    this.initChart();
  },
  methods: {
    getInfo() {
      getEchartData().then((items) => {
        items.forEach((el, ind) => {
          if (el.pointType === "cloud") {
            // 云
            // console.log(FHQImage)
            el.symbol = "image://" + FHQImage;
            //            "image://";
            el.symbolSize = [56, 35];
            el.label = {
              normal: {
                show: true,
                position: "bottom",
                borderWidth: 1,
                borderRadius: 12,
                padding: [4, 8, 4, 8],
                distance: 10,
                color: "rgb(255,255,255)",
                borderColor: "rgb(89,197,238)",
              },
            };
            this.erArr.push(el);
          } else if (el.pointType === "point") {
            // 球
            el.itemStyle = {
              borderColor: el.pointColor
                ? el.pointColor
                : "rgba(4, 242, 28, 1)",
              borderWidth: 3,
              color: "#0ceffd",
            };
            // 清除没有父节点的值
            // sanArr.push(el);
            if (el.belong && !items.some((iteP) => el.belong === iteP.name)) {
              items.splice(ind, 1);
            } else {
              this.sanArr.push(el);
            }
          }
          if (!el.belong) {
            el.children = [];
            items.forEach((es) => {
              if (es.belong === el.name) {
                el.children.push(es);
              }
            });
            this.allArr.push(el);
          }
        });
        this.group(this.erArr, 36);
        this.group(this.sanArr, 50);
        this.allArr = [...this.erArr, ...this.sanArr];
        // 线坐标和配置
        this.dataArr = this.linesConfig(this.allArr);
        this.deployEchart();
      });
    },
    initChart() {
      this.myChart = echarts.init(this.$refs[this.myRef]);
    },
    group(arr, r) {
      const newArray = [];
      const { length: arLen } = arr;
      arr.forEach((e, ind) => {
        // 按角度均匀分布
        const ang = 90 - (360 / arLen).toFixed(2) * (ind + 1);
        const x = Math.cos((ang * Math.PI) / 180).toFixed(2) * r;
        const y = Math.sin((ang * Math.PI) / 180).toFixed(2) * r;
        e.value = [x.toFixed(2), y.toFixed(2)];
        if (e.belong) {
          let rotate = "";
          const angle = (160 / arr.length).toFixed(2);
          if (x > 0 && y >= 0) {
            rotate = (r - angle * ind).toFixed(2);
            // rotate = (90 - 360 / arr.length * (ind + 1)).toFixed(2);
          } else if (x <= 0 && y > 0) {
            rotate = (-r + angle * (arr.length - ind)).toFixed(2);
          } else if (x < 0 && y <= 0) {
            rotate = (r - angle * (ind - arr.length * 0.5)).toFixed(2);
          } else if (x >= 0 && y < 0) {
            rotate = (-8 + angle * (arr.length * 0.25 - ind)).toFixed(2);
          }
          e.label = {
            show: true,
            width: 200,
            color: {
              lineColor: {
                color: "rgb(24,163,239)",
              },
            },
            rotate,
            align: x > 0 ? "left" : "right",
            padding: x > 0 ? [0, 0, 0, 16] : [0, 16, 0, 0],
          };
        }
        newArray.push(e);
      });
      return newArray;
    },
    linesConfig(arr) {
      const [dataArr, targetCoord] = [[], [0, 0]];
      arr.forEach((el) => {
        if (!el.belong) {
          dataArr.push([
            { coord: targetCoord },
            {
              coord: el.value,
              lineStyle: el.lineStyle,
              effect: {
                symbolSize: [4, 16], // 动画的大小
                period: 6, // 时间快慢
                delay: 2, // 延时计算
                ...el.effect,
              },
            },
          ]);
          arr.forEach((element) => {
            if (element.belong === el.name) {
              dataArr.push([
                { coord: el.value },
                {
                  coord: element.value,
                  lineStyle: element.lineStyle,
                  effect: {
                    symbolSize: [4, 8], // 动画的大小
                    period: 6, // 时间快慢
                    delay: 2, // 延时计算
                    ...element.effect,
                  },
                },
              ]);
            }
          });
        }
      });
      return dataArr;
    },
    deployEchart() {
      console.log(110);
       let _than=this
      this.option.series[0].data = this.allArr;
      this.option.series[1].data = this.dataArr;
      this.option && this.myChart.setOption(this.option);
      this.myChart.on("click", function (params) {
       
        
        console.log(params);
        if(params.data.pointColor){
          _than.$message({
          message: '这是错误节点',
          type: 'warning'
        });
        }
      });
    },
  },
  watch: {},
  beforeDestroy() {},
};
</script>

<style scoped>
.myChart {
  height: 100%;
  /* background: #666; */
}
</style>
